{% extends '__base__.html' %}

{% block title %}首页{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="/file?path=/{{ path | range_slice(0, loop.index) | join('/')}}&mode=list">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mkdir">新建文件夹</button>
                <button type="button" class="btn btn-primary"
                    onclick="location.assign('/file/edit?path=/{{ path | join('/') }}')">新建文件</button>
            </div>
        </div>
    </div>
    <div id="mkdir" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入文件名" aria-label="Recipient's username"
                        aria-describedby="basic-addon2">
                    <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md pb-4 table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col" width="6%"><input class="total" type="checkbox"></th>

                        <th scope="col" width="60%">名称</th>
                        <th scope="col" width="10%">大小</th>
                        <th scope="col" width="24%">修改日期</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in files %}
                    <tr class="item" style="cursor: pointer;">
                        <td class="select"><input type="checkbox"></td>
                        {% if item.content_type == 'd' %}
                        <td><i class="fa fa-folder-o mr-3"></i><a
                                href="/file?path=/{{ path | join('/') }}/{{ item.name }}">{{ item.name }}</a></td>
                        {% else %}
                        <td><i class="fa fa-file-o mr-3"></i><a
                                href="/file/view?path=/{{ path | join('/') }}&id={{ item.id }}">{{ item.name }}</a></td>
                        {% endif %}
                        <td>-</td>
                        <td>{{ item.updated_at }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="popupRC" style="display:none;background-color: antiquewhite;" class="panel panel-primary">
    <!-- <div class="panel-heading ">Right Click Window</div> -->
    <div class="panel-body">
        <button class="dropdown-item showfile">预览</button>
    </div>
    <!-- <div class="panel-footer"><input type="button" class="btn" value="close" onClick="$('#popupRC').css({ display: 'none' });"/></div> -->
</div>
{% endblock %}

{% block beforebody %}
<script>
    // 新建文件夹
    document.querySelector('#mkdir button').addEventListener('click', event => {
        let el = event.target
        let parent = el.dataset["path"]
        let name = el.parentNode.querySelector('input').value
        axios.get('/file/mkdir/' + name, {
            params: {
                parent: parent,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/file?path=' + data['msg'])
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
</script>
{% endblock %}